var lunbo = document.querySelector("#lunbo");
var ImgBox = document.querySelector(".wrap");
var aLi = ImgBox.querySelectorAll("li");
var pre = document.querySelector(".pre");
var next = document.querySelector(".next");
var img = ImgBox.querySelector("img");
//分页器
var pagination = document.querySelector(".pagination");
//获取图片宽度
var imgW = img.offsetWidth;
var index = 1; //图片下标初始值
console.log(imgW);
//克隆第一张图片，添加到图片队列的最后面
var clone_first = aLi[0].cloneNode(true);
ImgBox.appendChild(clone_first);
//克隆最后一张图插入到图片队列的头部
var clone_last = aLi[aLi.length - 1].cloneNode(true);
ImgBox.insertBefore(clone_last, aLi[0]);

//判断是否可点击状态，当动画结束后才能点击。
var isClick = true;
//初始化轮播图的位置
ImgBox.style.transform = "translateX(" + (-index * imgW) + "px)";
console.log(ImgBox.style.transform)
//动态添加分页器
for(var i = 0; i < aLi.length; i++) {
	var span = document.createElement("span");
	pagination.appendChild(span);
}
var span = pagination.querySelectorAll("span");
span[0].classList.add("active"); //给分页添加初始值

//点击左右按钮时分页器跟随图片移动
function pag(k) {
	k = k - 1
	for(var j = 0; j < span.length; j++) {
		span[j].classList.remove("active")
	}
	if(k >= 0) {
		if(k >= span.length) {
			k = 0;
		}
		k = k;

	} else {
		k = span.length - 1;
	}
	span[k].classList.add("active");
}
//给分页器添加点击效果
for(var i = 0; i < span.length; i++) {
	(function(item) {
		span[item].addEventListener("click", function() {
			for(var j = 0; j < span.length; j++) {
				span[j].classList.remove("active")
			}
			span[item].classList.add("active");
			if(ImgBox.classList.contains("tran")) {
				ImgBox.classList.add("tran");
			}
			index = (item + 1);
			ImgBox.style.transform = "translateX(" + (-index * imgW) + "px)";
		})
	})(i)
}

//移动函数
function move() {
	isClick = false;
	//增加动画类
	if(!ImgBox.classList.contains("tran")) {
		ImgBox.classList.add("tran");
	}
	ImgBox.style.transform = "translateX(" + (-index * imgW) + "px)";
	pag(index);
}
//右边按钮
next.addEventListener("click", function() {
	if(isClick == true) {
		index++;
		move();
	}
})
//左边按钮
pre.addEventListener("click", function() {
	if(isClick == true) {
		move((index--));
	}
})
//添加计时器，自动轮播
var t = setInterval(function() {
	if(isClick == true) {
		index++;
		move();
	}
}, 2000)

ImgBox.addEventListener("transitionend", function() {
	//边界的判断
	//当克隆了最后一张图片并添加到图片队列时，index值应该图片列队的长度加1。
	if(index == aLi.length + 1) {
		index = 1;
		ImgBox.classList.remove("tran");
		ImgBox.style.transform = "translateX(" + (-index * imgW) + "px)";
	}
	if(index == 0) {
		//因为我们克隆多了最后一张图片添加进了图片队列里，所有index值应该为图片列表的长度
		index = aLi.length;
		ImgBox.classList.remove("tran");
		ImgBox.style.transform = "translateX(" + (-index * imgW) + "px)";
	}
	isClick = true;
})

//抢购倒计时
var hour = document.querySelector("#hour_")
var minute = document.querySelector("#minute_")
var second = document.querySelector("#second_")
var date = +new Date('2018-05-14');
var wo = setInterval(function() {
	var date1 = +new Date();
	var sheng = date - date1;
	var totals = sheng / 1000;
	totals = Math.floor(totals); //向下取整
	totals = Math.abs(totals); //取绝对值
	var h = Math.floor(totals / 3600);
	var m = Math.floor((totals / 60) % 60);
	var s = Math.floor(totals % 60);
	h = h >= 10 ? h : "0" + h;
	m = m >= 10 ? m : "0" + m;
	s = s >= 10 ? s : "0" + s;
	//	document.body.innerHTML=h+"小时"+m+"分钟"+s+"秒";
	hour.innerText = h;
	minute.innerText = m;
	second.innerText = s;
}, 1000)
//侧边栏的实时显示
var fixbox = document.querySelector(".fixbox");
var topD = document.querySelector("#topd");
var cai = document.querySelectorAll(".fixbox_ul li");
console.log(cai[0]);
console.log(topD)
function getScrollTop() {
	var scrollTop = 0;
	if(document.documentElement && document.documentElement.scrollTop) {
		scrollTop = document.documentElement.scrollTop;
	} else if(document.body) {
		scrollTop = document.body.scrollTop;
	}
	return scrollTop;
}
document.onscroll = function() {
	var scrollT=  getScrollTop();
	console.log(scrollT);
	if(scrollT<600){
		fixbox.style.display="none";
		topD.style.display="none";
	}else{
		fixbox.style.display="block";
		topD.style.display="block";
		if(scrollT>=600&&scrollT<800){
			cai[0].classList.add("active");
		}else if(scrollT>=850&&scrollT<1500){
			cai[0].classList.remove("active");
			cai[1].classList.add("active");
		}else{
			cai[1].classList.remove("active");
		}
	}
}
//下拉频道
var _uu = document.querySelectorAll(".xiaMeu_uu");
var abq = document.querySelectorAll(".nav_2 >a");
console.log(abq)
for(var i=0;i<abq.length-2;i++){
	(function(index){
		abq[index].addEventListener("mouseover",function(){
			for(var j=0;j<_uu.length;j++){
				_uu[j].style.height="0";
			}
			_uu[index].style.height="230px";
			abq[index].addEventListener("mouseleave",function(){
				_uu[index].style.height="0";
			})
			_uu[index].addEventListener("mouseover",function(){
				_uu[index].style.height="230px";
			})
			_uu[index].addEventListener("mouseleave",function(){
				_uu[index].style.height="0";
			})
			
		})
		
	})(i)
}
